/* eslint-disable max-len */
/* eslint-disable no-use-before-define */
/**
 * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * defination
 */
import { computed, defineComponent, SetupContext, ref, watch, onMounted } from 'vue';
import { MeterGroupProps, MetergroupLabelItem, meterGroupProps } from './meter-group.props';

import './meter-group.scss';
import { create } from 'domain';

export default defineComponent({
    name: 'FMeterGroup',
    props: meterGroupProps,
    emits: [],
    setup(props: MeterGroupProps, context: SetupContext) {
        const datalist = ref(props.datalist);
        const max = ref(props.max);
        const orientation = ref(props.orientation);
        const labelPosition = ref(props.labelPosition);
        const labelOrientation = ref(props.labelOrientation);

        const percentage = (value = 0) => {
            const percentOfItem = (100 / max.value) * value;
            return percentOfItem;
        };

        function renderMeters() {
            return datalist.value.map((meter: MetergroupLabelItem, meterIndex: number) => {
                return (
                    <span class="f-metergroup-meter" data-pc-section="meter"
                        style={'background-color: ' + meter.color + ';' + (orientation.value === 'vertical' ? 'height' : 'width') + ': ' + percentage(meter.value) + '%;'} ></span>
                );
            });
        }

        function renderLabels() {
            return datalist.value.map((meter: MetergroupLabelItem, meterIndex: number) => {
                return (
                    <li class="f-metergroup-label" data-pc-section="labellistitem">
                        {/* 后期可以判断切换farris-icon */}
                        <span class="f-metergroup-label-marker" style={'background-color: ' + meter.color + ';'}></span>
                        <span class="f-metergroup-label-text">{meter.label} ({meter.value}%)</span>
                    </li>
                );
            });
        }

        return () => {
            return (
                <div class={'f-metergroup ' + (orientation.value === 'vertical' ? 'f-metergroup-vertical' : 'f-metergroup-horizontal')} >
                    {labelPosition.value === 'start' ?
                        <ol class={'f-metergroup-labels ' + (labelOrientation.value === 'vertical' ? 'f-metergroup-labels-vertical' : 'f-metergroup-labels-horizontal')}>
                            {renderLabels()}
                        </ol> : ''}
                    <div class="f-metergroup-meters">
                        {renderMeters()}
                    </div>
                    {labelPosition.value === 'end' ?
                        <ol class={'f-metergroup-labels ' + (labelOrientation.value === 'vertical' ? 'f-metergroup-labels-vertical' : 'f-metergroup-labels-horizontal')}>
                            {renderLabels()}
                        </ol> : ''}
                </div>
            );
        };
    }
});
